<style type="text/css">

.span4.node-panel {
  margin-top: 10px;
  margin-left: 10px;
  width: 33%;
}
.node-attributes dl {
  margin-top: 5px;
  margin-bottom: 10px;
}
.node-attributes dt {
  width: 150px;
}
.node-attributes dd {
  margin-left: 160px;
}
.node-attributes dd a {
  /** lets make the destination links wrap */
  -ms-word-break: break-all;
  word-break: break-all;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

ul.viewMenu li {
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

div#pop-up {
  display: none;
  position: absolute;
  color: white;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px 5px 10px;
  -moz-border-radius: 8px 8px;
  border-radius: 8px 8px;
}

div#pop-up-title {
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: bolder;
}

div#pop-up-content {
  font-size: 12px;
}

rect.graphbox {
  fill: #FFF;
}

rect.graphbox.frame {
  stroke: #222;
  stroke-width: 2px
}

/* only things directly related to the network graph should be here */

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;  b
}

marker.broker {
  stroke: red;
  fill: red;
  stroke-width: 1.5px;
}

circle.broker {
  fill: #0c0;
}

circle.brokerSlave {
  fill: #c00;
}

circle.notActive {
  fill: #c00;
}

path.link.group {
  stroke: #ccc;
}

marker#group {
  stroke: #ccc;
  fill: #ccc;
}

circle.group {
  fill: #eee;
  stroke: #ccc;
}

circle.destination {
  fill: #bbb;
  stroke: #ccc;
}

circle.pinned {
  stroke-width: 4.5px;
}

path.link.profile {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

marker#container {
}

circle.container {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

path.link.container {
  stroke-dasharray: 0, 2 1;
  stroke: #888;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
  cursor: pointer;
}

circle.closeMode {
  cursor: crosshair;
}

path.link.destination {
  stroke: #ccc;
}

circle.topic {
  fill: #c0c;
}

circle.queue {
  fill: #00c;
}

circle.consumer {
  fill: #cfc;
}

circle.producer {
  fill: #ccf;
}

path.link.producer {
  stroke: #ccc;
}

path.link.consumer {
  stroke: #ccc;
}

path.link.network {
  stroke: #ccc;
}

circle.selected {
  stroke-width: 3px;
}

.selected {
  stroke-width: 3px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}
</style>


<div class="row-fluid mq-page" ng-controller="ActiveMQ.BrokerDiagramController">

  <div ng-hide="inDashboard" class="span12 page-padded">
    <div class="section-header">

      <div class="section-filter">
        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
        <i class="icon-remove clickable" title="Clear filter" ng-click="searchFilter = ''"></i>
      </div>

      <div ng-show="isFmc" class="profile-selection-controls">
        <div fabric-version-selector='selectedVersion'></div>
      </div>

      <div class="section-controls">
        <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
          View &nbsp;<i class="icon-caret-down"></i>
        </a>

        <ul class="dropdown-menu viewMenu">
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.consumer"> Consumers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.producer"> Producers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.queue"> Queues
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.topic"> Topics
            </label>
          </li>
          <li class="divider"></li>
          <li ng-show="isFmc">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.group"> Broker groups
            </label>
          </li>
          <li ng-show="isFmc">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.profile"> Profiles
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.broker"> Brokers
            </label>
          </li>
          <li ng-show="isFmc">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.slave"> Slave brokers
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.network"> Networks
            </label>
          </li>
          <li ng-show="isFmc">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.container"> Containers
            </label>
          </li>
          <li class="divider"></li>
          <li title="Should we show the details panel on the left">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.panel"> Details panel
            </label>
          </li>
          <li title="Show the summary popup as you hover over nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.popup"> Hover text
            </label>
          </li>
          <li title="Show the labels next to nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.label"> Label
            </label>
          </li>
        </ul>

        <a ng-show="isFmc" ng-href="#/fabric/mq/{{selectedVersion.id}}/brokers{{hash}}" title="View the broker and container diagram">
          <i class="icon-edit"></i> Configuration
        </a>
      </div>
    </div>
  </div>


  <div id="pop-up">
    <div id="pop-up-title"></div>
    <div id="pop-up-content"></div>
  </div>

  <div class="row-fluid">
    <div class="{{viewSettings.panel ? 'span8' : 'span12'}} canvas broker-canvas">
      <div hawtio-force-graph graph="graph" selected-model="selectedNode" link-distance="150" charge="-600" nodesize="10" marker-kind="marker-end"
           style="min-height: 800px">
      </div>
    </div>
    <div ng-show="viewSettings.panel" class="span4 node-panel">
      <div ng-show="selectedNode" class="node-attributes">
        <dl ng-repeat="property in selectedNodeProperties" class="dl-horizontal">
          <dt title="{{property.key}}">{{property.key}}:</dt>
          <dd ng-bind-html-unsafe="property.value"></dd>
        </dl>
      </div>
    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>

</div>


